<template>
  <div class="ikea-assembly-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="宜家家具组装服务"
      left-arrow
      @click-left="handleGoBack"
      right-icon="headset"
      @click-right="handleContactService"
    />

    <!-- 黄色Banner区域 -->
    <div class="banner">
      <div class="banner-logos"></div>
      <h1 class="banner-title">宜家商城官方合作平台</h1>
      <p class="banner-desc">
        您在宜家全国36家门店或宜家网上商城购买的家具，万师傅均可提供组装服务
      </p>
    </div>

    <!-- 宜家家具组装卡片 -->
    <van-card
      class="service-card"
      :thumb="furnitureImg"
      title="宜家家具组装"
      thumb-position="right"
    >
      <template #footer>
        <van-button size="small" type="default" @click="handleFurnitureOrder"
          >去下单</van-button
        >
      </template>
    </van-card>

    <!-- 宜家厨房安装&测量卡片 -->
    <van-card
      class="service-card"
      :thumb="kitchenImg"
      title="宜家厨房安装&测量"
      thumb-position="right"
    >
      <template #footer>
        <van-button
          size="small"
          type="default"
          @click="handleKitchenInstallOrder"
          >安装下单</van-button
        >
        <van-button
          size="small"
          type="default"
          @click="handleKitchenMeasureOrder"
          >测量下单</van-button
        >
      </template>
    </van-card>
  </div>
</template>

<script>
import { ref } from "vue";
import { NavBar, Card, Button } from "vant";

export default {
  components: {
    VanNavBar: NavBar,
    VanCard: Card,
    VanButton: Button,
  },
  setup() {
    // 示例图片（可替换为实际本地/网络图片地址）
    const furnitureImg = ref("https://picsum.photos/600/300?random=1");
    const kitchenImg = ref("https://picsum.photos/600/300?random=2");

    // 导航栏左侧返回逻辑
    const handleGoBack = () => {
      history.back();
    };

    // 导航栏右侧客服逻辑
    const handleContactService = () => {
      console.log("点击客服，可跳转至客服页面");
      // 这里可添加跳转客服组件/页面的逻辑
    };

    // 家具组装下单逻辑
    const handleFurnitureOrder = () => {
      console.log("宜家家具组装-去下单");
      // 这里可添加跳转到家具组装下单页的逻辑
    };

    // 厨房安装下单逻辑
    const handleKitchenInstallOrder = () => {
      console.log("宜家厨房安装-安装下单");
      // 这里可添加跳转到厨房安装下单页的逻辑
    };

    // 厨房测量下单逻辑
    const handleKitchenMeasureOrder = () => {
      console.log("宜家厨房安装-测量下单");
      // 这里可添加跳转到厨房测量下单页的逻辑
    };

    return {
      furnitureImg,
      kitchenImg,
      handleGoBack,
      handleContactService,
      handleFurnitureOrder,
      handleKitchenInstallOrder,
      handleKitchenMeasureOrder,
    };
  },
};
</script>

<style scoped>
.ikea-assembly-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* Banner区域样式 */
.banner {
  background-color: #ffd300;
  padding: 24px 16px;
  text-align: center;
}

.banner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.wanshifu-logo {
  width: 80px;
  height: auto;
}

.ikea-logo {
  width: 100px;
  height: auto;
}

.banner-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.banner-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/* 服务卡片样式 */
.service-card {
  margin: 16px;
  --card-padding: 16px;
}

/* 按钮样式 */
.order-btn {
  margin-right: 8px;
}
</style>
